<template>
  <el-card>
    <el-form :inline="true" :model="dataForm" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select
          v-model="dataForm.id1"
          @change="getCateGoryList2<number | undefined>(dataForm.id1)"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in cateGoryList1"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          v-model="dataForm.id2"
          @change="getCateGoryList3<number | undefined>(dataForm.id2)"
          :disabled="!dataForm.id1"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in cateGoryList2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          v-model="dataForm.id3"
          :disabled="!dataForm.id2"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in cateGoryList3"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
  <tables :form="dataForm" />
</template>

<script lang="ts" setup>
import tables from './table.vue'
import { onMounted, reactive, ref, watch } from 'vue'
import {
  getCateGory1,
  getCateGory2,
  getCateGory3,
} from '@/api/product/classify'
import type { IItemCateGory } from '@/api/product/attr/type'

interface IForm {
  id1: number | undefined
  id2: number | undefined
  id3: number | undefined
}

const dataForm = reactive<IForm>({
  id1: undefined,
  id2: undefined,
  id3: undefined,
})

onMounted(() => {
  getCateGoryList1()
})

const cateGoryList1 = ref<IItemCateGory[]>([])
const getCateGoryList1 = async () => {
  const res = await getCateGory1()
  console.log(res, 'res')
  cateGoryList1.value = res.data
}

watch(
  () => dataForm.id1,
  (): void => {
    dataForm.id2 = undefined
    dataForm.id3 = undefined
  },
)

const cateGoryList2 = ref<IItemCateGory[]>([])
const getCateGoryList2 = async <T,>(id: T) => {
  const res = await getCateGory2(id as number)
  cateGoryList2.value = res.data
}

watch(
  () => dataForm.id2,
  (): void => {
    dataForm.id3 = undefined
  },
)

const cateGoryList3 = ref<IItemCateGory[]>([])
const getCateGoryList3 = async <T,>(id: T) => {
  const res = await getCateGory3(id as number)
  console.log(res, 'res')
  cateGoryList3.value = res.data
}
</script>
<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
